<template>
  <div class="container">
    <div class="head">
      <!-- 筛选栏 -->
      <a-form
        ref="formRef"
        :model="formState"
        layout="inline"
        :label-col="{ style: { width: '80px' } }"
        AutoComplete="off"
      >
        <a-form-item label="所属项目" name="projectSelect">
          <a-select
            ref="select"
            v-model:value="formState.projectId"
            style="width: 200px"
            @change=""
            :fieldNames="{ label: 'projectName', value: 'projectId' }"
            allow-clear
            placeholder="筛选项目"
            :options="projectOptions"
          />
        </a-form-item>
        <a-form-item label="任务类型" name="taskTypeSelect">
          <a-select
            ref="select"
            v-model:value="formState.taskType"
            style="width: 100px"
            @change=""
            placeholder="筛选类型"
            :options="typeOptions"
            allow-clear
          />
        </a-form-item>
      </a-form>

      <div>
        <a-button> 创建任务 </a-button>
      </div>
    </div>

    <div class="body">
      <a-table
        :columns="columns"
        :bordered="true"
        :data-source="data"
        :pagination="false"
        row-key="key"
        :loading="loading"
        :scroll="{ y: '65vh' }"
        :customRow="
          (record) => {
            return {
              onclick: (event) => {
                showDrawer(record);
              }
            };
          }
        "
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'taskName'">
            <a>{{ text }}</a>
          </template>
          <template v-else-if="column.dataIndex === 'taskType'">
            <span v-if="text == 0"><a-tag color="blue">课程任务</a-tag></span>
            <span v-else-if="text == 1"><a-tag color="green">需求任务</a-tag></span>
            <span v-else-if="text == 2"><a-tag color="cyan">开发任务</a-tag></span>
            <span v-else-if="text == 3"><a-tag color="yellow">测试任务</a-tag></span>
            <span v-else-if="text == 4"><a-tag color="orange">缺陷任务</a-tag></span>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-button>分配</a-button>
          </template>
        </template>
      </a-table>

      <a-pagination
        class="pagination-container"
        v-model:current="current"
        v-model:page-size="pageSizeRef"
        :total="total"
        show-size-changer
        @change=""
      />
    </div>
  </div>

  <CourseTaskDrawer
    v-model:model-visible="openDrawer"
    :task-id="taskId"
    @confirm="findTask(current)"
  />
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import type { TableColumnsType } from 'ant-design-vue';
import { useStore } from 'vuex';
import TaskDao from '@/daos/task_dao';
import ClassDao from '@/daos/class_dao';
import CourseTaskDrawer from './CourseTaskDrawer.vue';
const taskDao = new TaskDao();
const classDao = new ClassDao();
const store = useStore();
//任务抽屉参数
const openDrawer = ref<boolean>(false);
//打开任务抽屉
const showDrawer = (record) => {
  taskId.value = record.taskId;
  openDrawer.value = true;
};
//任务存储id
const taskId = ref();
//项目选择，通过调用store存储的项目内容，默认选择为空
const projectOptions = store.getters.courseProjectList;
//班级项存储对象
const classOptions = ref([]);

//加载状态
const loading = ref(true);
//定义所有任务对象
const allTasks = ref(undefined);
//定义当前所选任务对象
const tasks = ref(undefined);

//筛选条件项
const formState = reactive({
  projectId: undefined,
  classId: null,
  taskType: null,
  courseId: store.getters.courseId
});
//任务类型筛选
const typeOptions = ref([
  {
    value: 1,
    label: '需求任务'
  },
  {
    value: 2,
    label: '开发任务'
  },
  {
    value: 3,
    label: '测试任务'
  },
  {
    value: 4,
    label: '缺陷任务'
  },
  {
    value: 0,
    label: '课程任务'
  }
]);

//表格列
const columns: TableColumnsType = [
  { title: '任务名称', dataIndex: 'taskName', fixed: 'left', width: 300 },
  { title: '任务类型', dataIndex: 'taskType', width: 150, align: 'center' },
  { title: '分配数量', dataIndex: 'assignmentCount', width: 150, align: 'center' },
  { title: '创建时间', dataIndex: 'createTime', width: 300, align: 'center' }
];
//表格数据
const formRef = ref();

const data = ref([]);
//分页参数
const current = ref(1);
const pageSizeRef = ref(10);
const total = ref();
//获取当前课程中所有的任务内容
const findTask = async (current) => {
  loading.value = true;
  taskDao
    .findTasksByProjectId(
      formState.projectId,
      null,
      formState.taskType,
      formState.courseId,
      null,
      null,
      current,
      pageSizeRef.value
    )
    .then((result) => {
      data.value = result.data.data.rows;
      total.value = result.data.data.totalCount;
      loading.value = false;
    })
    .catch((error) => {
      console.error('获取任务列表失败 findTasksByProjectId', error);
      loading.value = false;
    });
};

//页面挂载完毕后调用方法获取任务内容
onMounted(() => {
  findTask(1);
});
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 1%;
  height: 100%;
  min-width: 1280px;
  overflow: auto;
}
.head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 15px;
  margin-bottom: 1%;
  height: 10%;
  width: 100%;
  min-height: 75px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid lightgray;
  border-radius: 10px;
  background-color: #fff;
  overflow: auto;
}

.body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5%;
  height: 90%;
  width: 100%;
  min-height: 540px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid lightgray;
  border-radius: 10px;
  background-color: #fff;
  overflow: auto;
}

.ant-table-wrapper {
  position: relative;
  height: 100%;
}

.pagination-container {
  text-align: center;
  /* 这将使容器内的内容水平居中 */
  margin: 10px 0;
  /* 可选：添加一些顶部间距以分隔表格和分页组件 */
}
</style>
